<template>
  <Dialog title="乘客详情" v-model="dialogVisible" width="800px">
    <div class="passenger-detail">
      <!-- 基本信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <Icon icon="ep:user" class="mr-5px" />
            基本信息
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="主键ID">{{ detailData.id || '-' }}</el-descriptions-item>
          <el-descriptions-item label="用户ID">{{ detailData.userId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{ detailData.username || '-' }}</el-descriptions-item>
          <el-descriptions-item label="昵称">{{ detailData.nickname || '-' }}</el-descriptions-item>
          <el-descriptions-item label="真实姓名">{{ detailData.realName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ detailData.mobile || '-' }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ detailData.email || '-' }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ detailData.idCard || '-' }}</el-descriptions-item>
          <el-descriptions-item label="用户级别">{{ detailData.userLevel || '-' }}</el-descriptions-item>
          <el-descriptions-item label="成长值">{{ detailData.growthValue || 0 }}</el-descriptions-item>
          <el-descriptions-item label="验证失败原因" :span="2">{{ detailData.verifyFailReason || '无' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 出行统计 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <Icon icon="ep:odometer" class="mr-5px" />
            出行统计
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="总出行公里数">
            <el-tag type="info">{{ formatNumber(detailData.totalKilometers) }} 公里</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="本月出行里程">
            <el-tag type="primary">{{ formatNumber(detailData.monthlyKilometers) }} 公里</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="最后订单时间" :span="2">
            {{ formatDateTime(detailData.lastOrderTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 财务信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <Icon icon="ep:wallet" class="mr-5px" />
            财务信息
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="总充值金额">
            <el-tag type="success">￥{{ formatMoney(detailData.totalRechargeAmount) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="退款金额">
            <el-tag type="warning">￥{{ formatMoney(detailData.refundAmount) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="总订单支付金额">
            <el-tag type="primary">￥{{ formatMoney(detailData.totalPayAmount) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="本月订单支付金额">
            <el-tag type="info">￥{{ formatMoney(detailData.monthlyPayAmount) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="可开发票金额">
            <el-tag type="success">￥{{ formatMoney(detailData.invoiceableAmount) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="未开发票金额">
            <el-tag type="danger">￥{{ formatMoney(detailData.unInvoicedAmount) }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 系统信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <Icon icon="ep:info-filled" class="mr-5px" />
            系统信息
          </div>
        </template>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="创建时间">{{ formatDateTime(detailData.createTime) }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'

/** 乘客信息详情 */
defineOptions({ name: 'PassengerInfoDetail' })

const dialogVisible = ref(false) // 弹窗的是否展示
const detailData = ref<any>({}) // 详情数据

/** 打开弹窗 */
const open = (data: any) => {
  dialogVisible.value = true
  detailData.value = { ...data }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 格式化日期时间 */
const formatDateTime = (date: string | Date) => {
  if (!date) return '-'
  const dateObj = typeof date === 'string' ? new Date(date) : date
  return formatDate(dateObj, 'YYYY-MM-DD HH:mm:ss')
}

/** 格式化金额 */
const formatMoney = (amount: number | string) => {
  if (!amount && amount !== 0) return '0.00'
  return Number(amount).toFixed(2)
}

/** 格式化数字 */
const formatNumber = (num: number | string) => {
  if (!num && num !== 0) return '0'
  return Number(num).toFixed(2)
}
</script>

<style scoped>
.passenger-detail {
  max-height: 600px;
  overflow-y: auto;
}

.detail-card {
  margin-bottom: 16px;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #303133;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-tag) {
  font-weight: 500;
}
</style>
